<!DOCTYPE html>
<html>   
    <style>
        div{
            background-color: coral;
            border: 1px solid;
            padding: 50px;
        }
    </style>
    <body>
        <P>事件冒泡先触发内部标签，事件捕获先触发外部事件</P>
        <p>要点击字！！！</p>
        <div id="div1">
            <p id="p1">我是事件冒泡</p>
        </div>
        <div id="div2">
            <p id="p2">我是事件捕获</p>
        </div>
        <script>
            document.getElementById("div1").addEventListener("click",function(){alert("你点击了div1元素")},false);
            document.getElementById("p1").addEventListener("click",function(){alert("你点击了p1元素")},false);
            document.getElementById("div2").addEventListener("click",function(){alert("你点击了div2元素")},true);
            document.getElementById("p2").addEventListener("click",function(){alert("你点击了p2元素")},true);
        </script>
    </body>
</html>